<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <el-table
            :data="systemList"
            style="width: 100%"
            class="card-table"
            :border="false"
            stripe
            :default-sort="{ prop: 'five' }"
          >
            <el-table-column prop="num" label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="账号"
              prop="mobile"
              width="120"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="roleName"
              label="角色"
              width="120"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="name"
              label="姓名"
              min-width="120"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="status"
              label="状态"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <span :class="scope.row.status === 0 ? 'red' : ''">{{
                  statusArr[scope.row.status]
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="createdTime"
              label="添加时间"
              min-width="150"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ formatHours(scope.row.createdTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="lastLoginTime"
              label="最近登录时间"
              min-width="150"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ formatHours(scope.row.lastLoginTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="remark"
              label="备注"
              align="center"
              min-width="200"
            />
            <el-table-column
              show-overflow-tooltip
              label="操作"
              align="center"
              width="150"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                >编辑</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="disableSystem(scope.row)"
                >{{ statusRow[scope.row.status] }}</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="del(scope.row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!---->
          <el-pagination
            background
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!---->
        </div>
      </el-col>
    </el-row>
    <!---->
    <myModal :disabled="disabled" :obj="objMo" @close="close" @save="modify">
      <div class="mpdalBody">
        <el-form
          ref="form"
          :model="editList"
          :rules="rules"
          label-width="85px"
          class="formDiv"
        >
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="11" :lg="11" class="">
              <el-form-item prop="mobile" label="账号:">
                <el-input v-model="editList.mobile" placeholder="输入账号" />
              </el-form-item>
            </el-col>
            <el-col :xs="11" :sm="11" :lg="11" class="">
              <el-form-item prop="password" label="密码:" label-width="82px">
                <el-input
                  v-model="editList.password"
                  placeholder="如不修改密码，请留空"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="11" :sm="11" :lg="11" class="">
              <el-form-item prop="roleId" label="角色:">
                <el-select
                  v-model="editList.roleId"
                  placeholder="请选择"
                  @change="(val) => checkChange(editList.roleId)"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="11" :sm="11" :lg="11" class="">
              <el-form-item prop="name" label="姓名:" label-width="82px">
                <el-select
                  v-if="!isInput"
                  v-model="editList.managerId"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="(item2, i) in manyName"
                    :key="i"
                    :label="item2.name"
                    :value="item2.id"
                  />
                </el-select>
                <el-input
                  v-else-if="isInput"
                  v-model="editList.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="22" :lg="22" class="">
              <el-form-item label="备注:" label-width="85px">
                <el-input
                  v-model="editList.remark"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入内容"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </myModal>
    <!---->
    <myModal :obj="objFour" @save="determine">
      <div class="mpdalBody">
        <h4>确定删除吗？</h4>
      </div>
    </myModal>
  </div>
</template>

<script>
import myModal from '@/components/Modal'
import { getSystemList, systemdel, modifyList } from '@/api/system'
import { getRoleList } from '@/api/resource'
import { formatHours } from '@/utils/common'
import { page } from '@/api/manager'
export default {
  components: { myModal },
  data() {
    return {
      formatHours,
      isInput: false,
      disabled: true,
      currentPage4: 1,
      systemList: [],
      total: 10,
      searchList: {
        name: '',
        roleName: '',
        status: '',
        page: 1,
        limit: 10
      },
      roleList: {
        page: 1,
        limit: 10000
      },
      editList: {
        mobile: '',
        password: '',
        roleId: '',
        name: '',
        remark: '',
        managerId: null
      },
      statusArr: ['已禁用', '有效'],
      statusRow: ['解禁', '禁用'],
      id: '',
      objMo: {
        show: false,
        title: '编辑系统账号',
        width: '647px'
      },
      objFour: {
        show: false,
        title: '系统设置',
        width: '647px'
      },
      radio: 3,
      required: '',
      textarea: '',
      options: [],
      manyName: [],
      filterName: [],
      rules: {
        mobile: [
          {
            required: true,
            message: '输入手机号',
            trigger: 'blur',
            pattern: /^1[3-9][0-9]{9}$/
          }
        ],
        password: [
          {
            required: false,
            message: '只可输入6~18位字母数字',
            trigger: 'blur',
            pattern: /^[A-Za-z0-9]{6,18}$/
          }
        ],
        roleId: [
          {
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请选择姓名',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    editList: {
      handler(newVal, oldVal) {
        var reg1 = /^1[3-9][0-9]{9}$/
        var reg2 = /^[A-Za-z0-9]{6,18}$/
        if (!newVal.mobile) {
          this.disabled = true
          return
        }
        var r1 = newVal.mobile.match(reg1)
        // var r2 = newVal.password.match(reg2)
        var managerCheck = this.isInput ? newVal.name : newVal.managerId
        if (r1 != null && newVal.roleId && managerCheck) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  created() {
    this.system()
    this.getRoleList()
  },
  mounted() {
    this.$parent.$on('searchData', (val) => {
      this.searchList = val
      this.system()
    })
    this.$parent.$on('reRender', () => {
      this.system()
    })
  },
  methods: {
    tofilterName(val) {
      this.filterName = this.manyName.filter((item) => {
        return item.name.includes(val)
      })
    },
    async getRoleList() {
      var res = await getRoleList(this.roleList)
      this.options = res.data
    },
    async system() {
      var res = await getSystemList(this.searchList)
      if (res.code === 200) {
        this.systemList = res.data.records
        this.total = res.data.total
      }
    },
    async checkChange(val, name) {
      const query = { page: 1, limit: 10000, type: null }
      var obj = {
        7: 4,
        2: 1,
        3: 1,
        6: 3,
        4: 2,
        5: 2
      }

      if (obj[val] !== undefined) {
        query.type = obj[val]
        this.isInput = false
        var res = await page(query)
        this.manyName = res.data.records
        this.editList.name = name
      } else {
        this.editList.name = name || ''
        this.isInput = true
      }
    },
    del(id) {
      this.objFour.show = true
      this.id = id
    },
    async disableSystem(row) {
      const res = await modifyList(row)
      if (res.code !== 200) return
      if (row.status === 1) {
        row.status = 0
      } else {
        row.status = 1
      }
      await modifyList(row)
    },
    async determine() {
      await systemdel(this.id)
      this.system()
      this.objFour.show = false
    },
    async modify() {
      await modifyList(this.editList)
      this.system()
      this.objMo.show = false
    },
    handleClick(row) {
      this.editList = Object.assign({}, row, { anagerId: row.id })
      this.checkChange(row.roleId, row.name)
      this.objMo.show = true
    },
    handleSizeChange(val) {
      this.searchList.page = 1
      this.searchList.limit = val
      this.system()
    },
    handleCurrentChange(val) {
      this.searchList.page = val
      this.system()
    },
    close() {
      this.objMo.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
.red {
  color: red !important;
}
</style>

